<template>
	<view class="container">
		<view class="search">
			<view class="left-icon"><uni-icons class="icon" color="#a1a0a0" type="left" size="20"></uni-icons></view>
			<view class="icon-input">
				<uni-icons class="icon" color="#a1a0a0" type="search" size="20"></uni-icons>
				<input :placeholder="searchText" @confirm="enterQuery" placeholder-class="input" ref="inp" autofocus="autofocus" :focus="focusState" @blur="focusState=false" v-model="search.searchKey"/>
			</view>
			<view class="btn" @click="enterQuery">搜索</view>
		</view>
		<view class="module">
			<view class="title">
				历史记录
				<image src="https://m.nocexpo.com/statics/js/modules/h5/img/del.svg" mode="widthFix" @click="del"/>
			</view>
			<view class="data">
				<view class="item" v-for="searchkey in searchKeyList1">
          <view @click="searchByWord(searchkey,1)">{{searchkey.keyword}}</view>
        </view>
        <view class="item" v-if="visbloe">
          <view class="sort-a" @click="gengduo">
            <image src="https://m.nocexpo.com/statics/js/modules/h5/img/sousuo.svg" mode="widthFix" style="width: 20rpx;"/>
          </view>
        </view>
			</view>
		</view>
		<view class="module">
			<view class="title">
				产品分类
			</view>
			<view class="data">
				<view class="item" v-for="proClassify in searchProductClassifyList">
          <view @click="searchByWord(proClassify,2)">{{proClassify.className}}</view>
        </view>
			</view>
		</view>
	</view>
</template>

<script>

import searchApi from '@/api/search.js';
import commonMethod from '@/utils/commonMethod.js';

export default {
	data() {
		return {
      delShow:false,
      sort:true,
      visbloe:false, //删除历史搜索记录隐藏按钮
      searchKeyList: [],//历史搜索记录
      searchKeyList1:[],
      searchKeyList2:[],
      searchProductClassifyList: [],//产品分类列表
      search: {
        searchKey: '',//搜索关键字
      },
      index: '',//搜索索引值
      searchText:'输入关键词搜索产品/供应商',//搜索框文字
      isNewProduct:'',
      focusState: false
    };
	},

  onLoad(e) {
    console.log(e);
    this.search.searchKey = e.searchKey;
    this.isNewProduct = e.isNewProduct;
    this.index = e.index;
  },

  async created() {
    //判断是否登录
    this.register = await commonMethod.getUserLoginFlag();
    if (!this.register) {
      //查询历史搜索记录
      this.getSearchKey();
    }

    //获取产品分类
    this.getSearchProductClassify();

    //获取输入焦点
    setTimeout(() => {
      this.$nextTick(() => {
        this.focusState = true
      })
    }, 2000);


  },

  mounted() {


  },
  methods: {
    getSearchText(){
      switch (this.index) {
        case 1:
          this.searchText = '产品搜索'
          break;
        case 2:
          this.searchText = '视频搜索'
          break;
        case 3:
          this.searchText = '供应商搜索'
          break;
        case 4:
          this.searchText = '新品搜索'
          break;
        case 5:
          this.searchText = '动态搜索'
          break;
        default:
          console.log("没有对应的index:" + this.index)
          break;
      }
    },

    /**
     * 获取历史搜索关键字
     */
    getSearchKey() {
      searchApi.getSearchKey({}).then(res => {
        this.searchKeyList = res.data.list
        for(let i =0;i<this.searchKeyList.length;i++){
          if(i<7){
            this.searchKeyList1.push(this.searchKeyList[i])
            this.visbloe=false
          }else{
            this.visbloe=true
          }
        }
      })
    },

    /**
     * 更多
     */
    gengduo(){
      this.searchKeyList1 = this.searchKeyList
      this.visbloe=false
    },

    /**
     * 获取产品分类
     */
    getSearchProductClassify() {
      searchApi.getSearchProductClassify({'exhibitionId':0}).then(res => {
        this.searchProductClassifyList = res.data.list
      })
    },

    /**
     * 返回
     */
    goBack() {
      window.location.href='index.html';
    },

    /**
     * 清空搜索框
     */
    delInput(){

      this.search.searchKey = ''
      this.$refs.inp.focus()
    },

    /**
     * 点击关键词触发查询
     * @param searchVal
     * @param type
     */
    searchByWord(searchVal, type) {
      switch (type) {
        case 1:
          this.search.searchKey = searchVal.keyword
          this.enterQuery()
          break
        case 2:
          this.search.searchKey = searchVal.className
          this.enterQuery()
          break
        default:
          break
      }
    },

    /**
     * 进入搜索页搜索
     */
    async enterQuery() {
      if (this.search.searchKey) {
        this.register = await commonMethod.getUserLoginFlag();
        if (!this.register) {
          this.saveSearchKey()
        }
      }
      //跳转到搜索页面
      commonMethod.toSearchPage({index: this.index ? this.index : 0, searchKey: this.search.searchKey, ifRecommend: 0,isNewProduct:this.isNewProduct ? this.isNewProduct : ''})
    },

    /**
     * 保存搜索关键字
     */
    saveSearchKey() {
      commonMethod.saveSearchKey({keyword:this.search.searchKey})
    },

    /**
     * 删除历史搜索记录
     */
    del(){
      searchApi.delSearchHistory({}).then(res => {
        this.searchKeyList1 = []
        this.searchKeyList = []
        this.sort=false
      })
    },

  }
};
</script>

<style lang="scss">
.container {
	background-color: #fff;
}
.search {
	display: flex;
	align-items: center;
	justify-content: space-between;
	line-height: 100rpx;
	overflow: hidden;
	background: #fff;
	margin-bottom: 50rpx;
	.left-icon {
		height: 100%;
		padding: 0px $interval-min;
	}
	.icon-input {
		flex: 1;
		display: flex;
		align-items: center;
		height: 68rpx;
		background: #f7f7f7;
		border-radius: 35rpx;
		.icon {
			margin-left: 25rpx;
			margin-right: 18rpx;
		}
		input {
			flex: 1;
			color: $text-color;
		}
		.input {
			color: #a1a0a0;
		}
	}
	.btn {
		height: 100%;
		color: $color-primary;
		font-size: $font-size + 2;
		padding: 0px $interval;
	}
}
.module {
	padding: 0px $interval;
	margin-bottom: 94rpx;
	.title {
		display: flex;
		align-items: center;
		justify-content: space-between;
		font-weight: 600;
		font-size: $font-size-max + 2;
		margin-bottom: 18rpx;
		image {
			width: 28rpx;
		}
	}
	.data{
		display: flex;
		flex-wrap: wrap;
		.item{
			color: $text-color-grey;
			padding: 0px 18rpx;
			line-height: 56rpx;
			background: #F7F7F7;
			border-radius: 28rpx;
			margin-right: 16rpx;
			margin-bottom: 16rpx;
		}
	}
}
</style>
